<template>
	<view>
		<view class="nav">
			<view class="nav-left">
				<scroll-view scroll-y :style="'height:'+height+'px'">
					<view class="nav-left-item" v-for="(item,index) in categoryList" @click="categoryClickMain(item,index)" :key="index"
					 :style="index==categoryActive?'color:'+activeTextColor+';background-color:'+activeBackgroundColor:''">
						{{item[label]}}
					</view>
				</scroll-view>
			</view>
			<view class="nav-right">
				<scroll-view scroll-y :scroll-top="scrollTop" @scroll="scroll" :style="'height:'+height+'px'" scroll-with-animation>
					<view v-if="type==1" class="nav-right-list">
						<view class="nav-right-item" :class="{'active':subDefaultActiveData==index2&&isEdit}" v-for="(item,index2) in subCategoryList" :key="index2" @click="categoryClickSub(item,index2)" >
							<image v-if="item[imgSrc]" :src="item[imgSrc]" />
							<image v-else :src="defaultLogo" />
							<view class="nav-right-item-text textTow">{{item[subLabel]}}</view>
						</view>
					</view>
					<view v-if="type==2">
						<view v-for="(item,index) in subCategoryList" :key="index" > 
							<view class="threeClassT">{{item.name}}</view>
							<view class="nav-right-item" v-for="(item2,index2) in item.list" :key="index2" @click="categoryClickSub(item2)" >
								<image :src="item2[imgSrc]" />
								<view>{{item2[subLabel]}}</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "category",
		data() {
			return {
				// height: 0,
				defaultLogo:"http://placehold.it/50x50",
				scrollTop: 0,
				scrollHeight: 0,
				categoryActive: 0,
				activeStyle: {
					color: this.activeTextColor,
					backgroundColor: this.activeBackgroundColor
				},
				subDefaultActiveData:0
			}
		},
		props: {
			isEdit:{
				type:Boolean
			},
			//主分类激活索引
			defaultActive: {
				type: Number,
				default: 0
			},
			//子分类激活索引
			subDefaultActive:{
				type: Number,
				default: 0
			},
			//主分类List
			categoryList: {
				type: Array,
				default: () => {
					return null;
				}
			},
			//侧边分类List
			subCategoryList: {
				type: Array,
				default: () => {
					return null;
				}
			},
			activeTextColor: {
				type: String,
				default: '#247CF6'
			},
			activeBackgroundColor: {
				type: String,
				default: '#fff'
			},
			label: {
				type: String,
				default: 'name'
			},
			subLabel: {
				type: String,
				default: 'name'
			},
			imgSrc: {
				type: String,
				default: 'logo'
			},
			height:{
				type:Number,
			},
			type:{
				type:Number,
				default:1
			},
			//主分类点击事件
			categoryMainClick: {},
			//子分类点击事件
			categorySubClick: {}
		},
		methods: {
			scroll(e) {
				this.scrollHeight = e.detail.scrollHeight;
			},
			categoryClickMain(category, index) {
				this.$emit('categoryMainClick',category,index)
				this.categoryActive = index;
				this.scrollTop = -this.scrollHeight * index;
			},
			categoryClickSub(category,index) {
				this.$emit('categorySubClick',category)
				this.subDefaultActiveData = index
			}
		},
		mounted() {
			this.subDefaultActiveData = this.subDefaultActive
			this.categoryActive = this.defaultActive
			// uni.getSystemInfo({
			// 	success: res => {
			// 		this.height = res.screenHeight - 50 - 50;
			// 	}
			// })
		},
		watch: {
			subCategoryList(newValue, oldValue) {
				
			},
			defaultActive(nv,ov){
				this.categoryActive = nv
			}
		},
	}
</script>

<style scoped lang='scss'>
	.nav {
		display: flex;
		width: 100%;
	}
	.threeClassT{
		text-align: center;
		line-height: 80rpx;
		font-size: 32rpx;
	}

	.nav-left {
		width: 30%;
		border-right: solid 1px #E0E0E0;
	}

	.nav-left-item {
		height: 100rpx;
		/* border-right: solid 1px #E0E0E0; */
		border-bottom: solid 1px #E0E0E0;
		font-size: 28rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.nav-right {
		width: 70%;
		padding-top: 10rpx;
		box-sizing: border-box;
	}
	.nav-right-list{
		display: flex;
		justify-content: flex-start;
		flex-wrap: wrap;
		padding-bottom: 60rpx;
		padding-left: 10rpx;
	}
	.nav-right-item {
		width: 33%;
		/* height: 100px; */
		// float: left;
		text-align: center;
		padding: 10rpx;
		font-size: 24rpx;
		box-sizing: border-box;
		// .nav-right-item-text{
		// 	overflow: hidden;
		// 	text-overflow: ellipsis;
		// 	display: -webkit-box;
		// 	line-height: 30rpx;
		// 	max-height: 60rpx;
		// 	-webkit-line-clamp: 2;
		// 	-webkit-box-orient: vertical;
		// }
		&.active{
			color: rgb(0, 119, 255);
			border: 1px solid  rgb(0, 119, 255);
		}
		
	}

	.nav-right-item image {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
	}


	.padding {
		height: var(--status-bar-height);
		width: 100%;
		top: 0;
		position: fixed;
		background-color: #F24544;
	}
</style>
